<template>
  <div class="index">
    <a-spin tip="loading..." :spinning="spinning">
      <a-layout id="components-layout-demo-side" style="min-height: 100vh">
        <a-layout-header class="header">
          <div class="header-box">
            <img src="@/assets/imgAdmin/loginLogo.png" alt="" />
            <p><span @click="goPage('home')">首页</span></p>
            <div style="cursor: pointer;" @click="goPage('detailedQuery')">
              详细查询
            </div>
            <div class="Logout" @click="logout">退出登录</div>
          </div>
        </a-layout-header>
        <a-layout-content class="layout-content">
          <div class="content">
            <router-view />
          </div>
        </a-layout-content>
      </a-layout>
    </a-spin>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "index",
  data() {
    return {
      collapsed: false,
      rootSubmenuKeys: [],
      visible: false,
      editBoxState: 1
    };
  },
  methods: {
    goPage(path) {
      this.$router.push({ name: path });
    },
    logout() {
      this.$ajax
        .post(this.$api.logout)
        .then(() => {
          localStorage.removeItem("token");
          sessionStorage.clear();
          this.$router.push({ name: "adminLogin" });
          this.$store.dispatch("changeLoginState", false);
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    }
  },
  computed: {
    ...mapState({
      spinning: "spinning"
    })
  },
  created() {}
};
</script>

<style scoped lang="less">
.index {
  width: 100%;
  height: 100%;
}

.ant-layout {
  height: 100%;
  /*::-webkit-scrollbar {*/
  /*  width: 0 !important;*/
  /*}*/
}
.header {
  background: @heading-color;
  height: 80px;
}
#components-layout-demo-side {
  .flex_content();
  .flex_justify_space();
  span {
    font-size: 16px;
  }
  .logout {
    color: red;
    cursor: pointer;
  }
}
.header-box {
  height: 80px;
  .flex_content();
  .flex_justify_space();
  align-items: center;
}

.header-box > img {
  width: 163px;
  height: 48px;
  padding-left: 22px;
}
.header-box > p {
  flex: 1;
  color: #ffffff;
  margin-left: 120px;
}
.header-box > p > span {
  cursor: pointer;
}

.header-box > div:nth-of-type(1) {
  width: 124px;
  height: 44px;
  background: linear-gradient(
    84deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(223, 240, 255, 1) 100%
  );
  border-radius: 4px;
  color: #42a5fe;
  font-size: 20px;
  text-align: center;
  line-height: 44px;
  margin-right: 68px;
}
.header-box > div > span {
  margin-left: 18px;
  font-size: 18px;
}
.info-wrapper {
  padding: 16px;
  text-align: center;
}
.info-item {
  .flex_content();
  .flex_justify_space();
  padding: 5px 0;
}
.ant-menu {
  height: calc(100% - 60px);
  overflow: auto;
}
.layout-content {
  height: 100%;
  width: 100%;
  padding: 31px;
}
.content {
  padding: 16px;
  background: #fff;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  @media (max-width: 1440px) {
    height: 646px;
  }
}
.Logout {
  cursor: pointer;
  color: #ffffff;
}
</style>
